<template>
	<view class="intention">
		<view class="container">
			<view class="cont">
				<text class="left"><text>*</text>联系人</text>
				<input type="text" placeholder="请输入联系人姓名" @input="changeName" />
			</view>
			<view class="line"></view>
			<view class="cont">
				<text class="left"><text>*</text>联系电话</text>
				<input type="text" placeholder="请输入联系电话" @input="changePhone" />
			</view>
			<view class="line"></view>
			<view class="cont">
				<text class="left"><text>*</text>投诉店铺</text>
				<input type="text" placeholder="请输入要投诉的店铺" @input="changeStoreName" />
			</view>
			<view class="line"></view>
			<view class="cont">
				<text class="left"><text>*</text>投诉内容</text>
				<input type="text" placeholder="请输入要投诉的内容" @input="changeContent" />
			</view>
		</view>
		<view class="flexBox">
			<view class="tips">我们会在收到你的消息72小时之后与您联系，请耐心等待</view>
			<view class="btnBox">
				<button @click="subCoop">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		feedback
	} from "@/api/getData.js";
	export default {
		data() {
			return {
				name: '',
				phone: '',
				complaintStoreName: '',
				complaintContent:''
			}
		},
		methods: {
			changeName(e) {
				this.name = e.target.value
			},
			changePhone(e) {
				this.phone = e.target.value
			},
			changeStoreName(e) {
				this.complaintStoreName = e.target.value
			},
			changeContent(e){
				this.complaintContent = e.target.value
			},
			//提交
			async subCoop() {
				if(this.name && this.phone && this.complaintStoreName && this.complaintContent){
					const param = {
						name:this.name,
						phone:this.phone,
						complaintStoreName:this.complaintStoreName,
						complaintContent:this.complaintContent
					}
					const {
						data: res
					} = await feedback(param)
					console.log(res)
					
					uni.showModal({
						content: '您的反馈是我们前进的动力 请耐心等待工作人员与您联系',
						showCancel:false,
						success: function(res) {
							
						}
					});
				}else{
					uni.$showMsg('请填写正确信息', 1500, 'error')
				}
			},
		}
	}
</script>

<style lang="less">
	.intention {
		.container {
			margin: 32rpx;
			background: #fff;
			border-radius: 16rpx;

			.cont {
				padding: 0 32rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-size: 24rpx;
					color: #171717;

					text {
						color: #E8232F;
						font-weight: bold;
					}
				}

				input {
					text-align: right;
					font-size: 24rpx;
				}
			}

			.line {
				height: 2rpx;
				background: #E2E2E2;
				margin: 0 32rpx;
			}
		}

		.flexBox {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;

			.tips {
				font-size: 20rpx;
				color: #A4A4A4;
				text-align: center;
			}

			.btnBox {
				margin-top: 42rpx;
				background: #fff;
				padding: 11rpx 0;

				button {
					width: 686rpx;
					height: 98rpx;
					background: #E60012;
					border-radius: 49rpx;
					line-height: 98rpx;
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>
